<template>
  <div class="app-container">
    <el-card class="box-card" shadow="hover">
      <div slot="header" class="clearfix">
        <span>任务表单</span>
      </div>
      <el-col :span="20" :offset="2">
        <template v-if="formCreateInfo.formType === 0">
          <form-create v-model="fApi" :rule="formCreateInfo.rule" :option="formCreateInfo.option" :value.sync="formCreateInfo.value"></form-create>
        </template>
        <template v-if="formCreateInfo.formType === 1">
          <dynamic-component :uri="formCreateInfo.formCustomCreatePath" :form-data="formCreateInfo.value"></dynamic-component>
        </template>

      </el-col>
    </el-card>
    <el-card class="box-card" shadow="hover" style="margin-top: 10px">
      <div slot="header" class="clearfix">
        <span>审批流程</span>
      </div>
      <el-row>
        <el-col :span="20" :offset="2">
          <el-form ref="approvalForm" :model="taskApprovalForm.flowData" :rules="rules" label-width="120px">
            <el-form-item label="指定审批人" prop="assignee">
              <el-input placeholder="审批人员" v-model="taskApprovalForm.flowData.assigneeName">
                <template slot="append"><el-button @click="userAssigneeSelect">审批人员</el-button></template>
              </el-input>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <el-row :gutter="10" type="flex" justify="center" >
        <el-col :span="1.5">
          <el-button icon="el-icon-circle-check" type="success" @click="handleComplete" :loading="buttonLoading">提交</el-button>
        </el-col>
      </el-row>
    </el-card>

    <!-- tagSelect弹框 -->
    <tag-select-dialog :title="userListTitle" v-if="userListOpen"
                       :list-select-show="userListOpen"
                       :select-path="userListPath"
                       @getListValue="getUserListValue">
    </tag-select-dialog>
  </div>
</template>

<script>

import {getBpmProcessInstance} from "@/api/flowable/bpmProcessInstance";
import FlowChart from "@/views/flowable/bpmProcessDetail/flowChart.vue";
import formCreate from "@form-create/element-ui";
import {complete} from "@/api/flowable/bpmTask";
import TagSelectDialog from "@/components/tagSelectDialog/tagSelectDialog.vue";
import DynamicComponent from "@/components/DynamicComponent/dynamicComponent.vue";

export default {
  name: "instanceApproval",
  components: {DynamicComponent, TagSelectDialog},
  data() {
    return {
      fApi: {},
      rules: {
        comment: [{ required: true, message: '请输入审批意见', trigger: 'blur' }],
      },
      userListPath:'flowable/bpmProcessDetail/tagselect',
      //是否加载tagSelect弹框
      userListOpen:false,
      userListTitle:"审批人员选择",
      buttonLoading:false,
    };
  },
  props:{
    taskApprovalForm:{
      type:Object,
      require:true
    },
    //流程表单信息
    formCreateInfo:{
      type:Object,
      require:true
    },
  },
  methods: {

    userAssigneeSelect(){
      this.userListOpen = true;
    },

    handleComplete(){
      this.$refs["approvalForm"].validate(valid => {
        if (valid) {
          this.$emit('complete');
        }
      })

    },

    handleDelegate(){

    },

    handleTransfer(){

    },

    handleReturn(){

    },

    handleReject(){

    },
    getUserListValue(val){
      this.userListOpen = false;
      this.$emit('selectApprover',val)
    }
  }
};
</script>
